<template>
	<view>
    <head-box></head-box>
    <view class="tab-botton">
      <u-row gutter="16" justify="flex-start">
        <u-col span="4"     v-for="(item, index) in list" :key="index"
               :data-id="item.id"
         @click="onItemClick(item)"
        >
          <view class="h5-data">
            <view class="title">
              <image class="_logo" :src="$imageUrl+item.gpinfoLogo"></image>
            </view>
            <view>
              <text>
                {{item.gpinfoName}}
              </text>
            </view>
          </view>

        </u-col>
      </u-row>
      <u-loadmore :status="status" :icon-type="iconType" @loadmore="loadmore" />
    </view>
    <tabs-box></tabs-box>
	</view>
</template>

<script>
import { group1 } from '@/mixins/group-1'
import {gpListHasGpinfoUrl} from '@/api/group'
	export default {
    mixins:[group1],
		data() {
			return {

			};
		},
    methods: {
      //群团列表
      async  getList() {
        await this.getLists(gpListHasGpinfoUrl,{pageSize:10,pageNo:this.pageNo})
      },
      //跳第三方页面
      onItemClick(item){
        const {gpinfoUrl,gpinfoPhone} = item
        console.log ( gpinfoUrl )
        const str = decodeURIComponent(gpinfoUrl)
       const h1= str.startsWith('https://')
        const h2=str.startsWith('http://')
      if(gpinfoUrl==='phone'){
         this.$api.makePhoneCall(gpinfoPhone)
        }else if(h1 || h2){
        this.$api.handleMenu(`/pages/webview/webview?url=${decodeURIComponent(item.gpinfoUrl)}`)
       }

      }
    }
	}
</script>

<style lang="scss" scoped>
.wrap {
  padding: 24rpx;
}

.tab-botton{
  padding:20rpx;
}
.h5-data{
  text-align: center;
  margin: 20rpx;
  ._logo {
    width: 60rpx;
    height: 60rpx;
    margin: 0 30rpx 0 20rpx;
    vertical-align: middle;
  }
}
</style>
